<template>
    <div class="download-container" v-loading="loading">
        <div v-for="item in datas" :key="item.id" class="download-item">
            <div class="item-detail">
                <div class="title">{{ item.title }}</div>
                <div class="download" @click="handleDownload(download)">下载</div>
            </div>
        </div>

    </div>
</template>

<script>
export default {
    name: "downloadList",
    data() {
        return {
            loading: false,
            datas: [

            ]
        }
    },
    mounted() {
        this.getData();
    },
    methods: {

        async getData() {
            const loading = this.$loading();
            const { data } = await this.$fetch.get(`/api/download/list`);
            this.datas = data
            loading.close()

        },

        handleDownload(item) {
            this.$download(item.link)

        },

    }
}
</script>

<style lang="less" scoped>
.download-container {
    width: 100%;
    box-sizing: border-box;
    height: 100%;

    .download-item {
        margin-top: 25px;
        display: flex;
        flex-direction: column;
        font-size: 16px;

        .item-header {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .item-title {
                height: 34px;
                min-width: 166px;
                max-width: max-content;
                background: url(~@/assets/topic-title-bg.png) center center no-repeat;
                background-size: cover;
                font-family: PingFangSC, PingFang SC;
                font-weight: 600;
                font-size: 16px;
                text-indent: 14px;
                color: #FFFFFF;
                line-height: 34px;
                text-align: left;
                font-style: normal;
                cursor: default;
            }

            .more {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 14px;
                color: #3560AB;
                text-align: right;
                font-style: normal;
                margin-right: 30px;
                cursor: pointer;

            }
        }

        .item-detail {
            display: flex;
            align-items: center;
            width: 100%;
            height: 40px;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #efefef;

            .title {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 14px;
                color: #333333;
                text-align: left;
                font-style: normal;
                flex: 1;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }

            .download {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 14px;
                color: #3560AB;
                text-align: right;
                font-style: normal;
                margin-right: 30px;
                cursor: pointer;

                &:hover {
                    text-decoration: underline;
                }
            }
        }
    }

}
</style>